<template>
  <div id="bingmap-container" v-on:keyup.ctrl.67="copyPosition">
    <p class="info">{{ position }}</p>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
export default {
  data() {
    return {
      viewer: null,
      curEntity: null,
      position: ''
    };
  },

  mounted() {
    const viewer = new Cesium.Viewer('bingmap-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: true, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true
    });
    // 设置初始位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 20000000)
    });

    //  去除水印
    viewer._cesiumWidget._creditContainer.style.display = 'none';

    // 高德标注
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );

    // 自定义事件
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    const ellipsoid = viewer.scene.globe.ellipsoid;
    const that = this;
    handler.setInputAction(function (movement) {
      // 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
      const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
      if (cartesian) {
        // 将笛卡尔坐标转换为地理坐标
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        // 将弧度转为度的十进制度表示
        const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3);
        const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3);
        // 获取相机高度
        const height = Math.ceil(viewer.camera.positionCartographic.height).toFixed(3);
        that.position = '坐标：(' + longitudeString + ', ' + latitudeString + ',' + height + ')';
      } else {
        that.position = '';
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // 双击赋值
    handler.setInputAction((movement) => {
      console.log(this.position);
      var pick = viewer.scene.pick(movement.position);
      if (Cesium.defined(pick) && pick.id.id) {
        const entity = viewer.entities.getById(pick.id.id);
        entity.ellipse.outlineColor = Cesium.Color.GREENYELLOW;
        entity.ellipse.outlineWidth = 10;
        this.curEntity = entity;
      } else {
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //
    this.viewer = viewer;

    // 绘制图形
    viewer.entities.add({
      id: 'cesium-point_01',
      position: Cesium.Cartesian3.fromDegrees(108.973, 34.182),
      point: {
        pixelSize: 10,
        color: Cesium.Color.YELLOW,
        outlineColor: Cesium.Color.GREENYELLOW,
        outlineWidth: 2
      }
    });

    var start = Cesium.JulianDate.fromIso8601('2021-09-01');
    var end = Cesium.JulianDate.fromIso8601('2021-09-02');

    viewer.timeline.zoomTo(start, end);

    var clock = viewer.clock;
    clock.startTime = start;
    clock.endTime = end;
    clock.currentTime = start;
    clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    clock.multiplier = 400;

    var position = new Cesium.SampledPositionProperty();
    position.addSample(
      Cesium.JulianDate.fromIso8601('2021-09-01T00:00:00.00Z'),
      Cesium.Cartesian3.fromDegrees(103.0, 40.0, 10000.0)
    );
    position.addSample(
      Cesium.JulianDate.fromIso8601('2021-09-02T00:00:00.00Z'),
      Cesium.Cartesian3.fromDegrees(-114.0, 45.0, 10000.0)
    );

    const duckCone = viewer.entities.add({
      id: 'cesium-ellipse_01',
      position: position,
      name: 'Red ellipse on surface with outline',
      ellipse: {
        semiMinorAxis: 300000.0,
        semiMajorAxis: 300000.0,
        height: 2000.0,
        fill: true,
        material: 'images/duck.gif',
        outline: true, // 必须设置height，否则ouline无法显示
        outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
        outlineWidth: 10.0 // 不能设置，固定为1
      }
    });

    viewer.trackedEntity = duckCone;

    // 垂直方向拉伸
    viewer.entities.add({
      id: 'cesium-ellipse_02',
      position: Cesium.Cartesian3.fromDegrees(112.611, 29.667),
      name: 'Red ellipse on surface with outline',
      ellipse: {
        semiMinorAxis: 250000.0,
        semiMajorAxis: 400000.0,
        height: 200000.0,
        extrudedHeight: 400000.0,
        fill: true,
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true, // 必须设置height，否则ouline无法显示
        outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
        outlineWidth: 10.0 // windows系统下不能设置固定为1
      }
    });

    // box
    // viewer.entities.add({
    //   name: 'Blue box',
    //   position: Cesium.Cartesian3.fromDegrees(85.569, 44.91, 0),
    //   box: {
    //     dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    //     material: Cesium.Color.BLUE
    //   }
    // });

    // Circle 圆盘
    // viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 150000.0),
    //   name: 'Green circle at height',
    //   ellipse: {
    //     semiMinorAxis: 300000.0,
    //     semiMajorAxis: 300000.0,
    //     height: 200000.0,
    //     material: Cesium.Color.GREEN
    //   }
    // });

    // Ellipse  椭圆
    // viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
    //   name: 'Red ellipse on surface with outline',
    //   ellipse: {
    //     semiMinorAxis: 250000.0,
    //     semiMajorAxis: 400000.0,
    //     material: Cesium.Color.RED.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.RED
    //   }
    // });

    // // Corridor
    // viewer.entities.add({
    //   name: 'Red corridor on surface with rounded corners and outline',
    //   corridor: {
    //     positions: Cesium.Cartesian3.fromDegreesArray([100.0, 40.0, 105.0, 40.0, 105.0, 35.0]),
    //     width: 200000.0,
    //     material: Cesium.Color.RED.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.RED
    //   }
    // });

    // // Cylinder
    // viewer.entities.add({
    //   name: 'Green cylinder with black outline',
    //   position: Cesium.Cartesian3.fromDegrees(100.0, 40.0, 200000.0),
    //   cylinder: {
    //     length: 400000.0,
    //     topRadius: 200000.0,
    //     bottomRadius: 200000.0,
    //     material: Cesium.Color.GREEN.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.DARK_GREEN
    //   }
    // });
    // // Cone
    // viewer.entities.add({
    //   name: 'Red cone',
    //   position: Cesium.Cartesian3.fromDegrees(105.0, 40.0, 200000.0),
    //   cylinder: {
    //     length: 400000.0,
    //     topRadius: 0.0,
    //     bottomRadius: 200000.0,
    //     material: Cesium.Color.RED
    //   }
    // });
    // // Polygon
    // viewer.entities.add({
    //   name: 'Red polygon on surface',
    //   polygon: {
    //     hierarchy: Cesium.Cartesian3.fromDegreesArray([
    //       115.0, 37.0, 115.0, 32.0, 107.0, 33.0, 102.0, 31.0, 102.0, 35.0
    //     ]),
    //     material: Cesium.Color.RED
    //   }
    // });
    // // polyline
    // viewer.entities.add({
    //   name: 'Red line on the surface',
    //   polyline: {
    //     positions: Cesium.Cartesian3.fromDegreesArray([75, 35, 125, 35]),
    //     width: 5,
    //     material: Cesium.Color.RED
    //   }
    // });
    // // polylineVolume
    // function computeCircle(radius) {
    //   var positions = [];
    //   for (var i = 0; i < 360; i++) {
    //     var radians = Cesium.Math.toRadians(i);
    //     positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
    //   }
    //   return positions;
    // }
    // viewer.entities.add({
    //   name: 'Red tube with rounded corners',
    //   polylineVolume: {
    //     positions: Cesium.Cartesian3.fromDegreesArray([85.0, 32.0, 85.0, 36.0, 89.0, 36.0]),
    //     shape: computeCircle(60000.0),
    //     material: Cesium.Color.RED
    //   }
    // });
    // // rectangle
    // viewer.entities.add({
    //   name: 'Red translucent rectangle with outline',
    //   rectangle: {
    //     coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),
    //     material: Cesium.Color.RED.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.RED
    //   }
    // });
    // // Sphere
    // viewer.entities.add({
    //   name: 'Red sphere with black outline',
    //   position: Cesium.Cartesian3.fromDegrees(107.0, 40.0, 300000.0),
    //   ellipsoid: {
    //     radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
    //     material: Cesium.Color.RED.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.BLACK
    //   }
    // });
    // // ellipsoid
    // viewer.entities.add({
    //   name: 'Blue ellipsoid',
    //   position: Cesium.Cartesian3.fromDegrees(114.0, 40.0, 300000.0),
    //   ellipsoid: {
    //     radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    //     material: Cesium.Color.BLUE
    //   }
    // });
    // // wall
    // viewer.entities.add({
    //   name: 'Green wall from surface with outline',
    //   wall: {
    //     positions: Cesium.Cartesian3.fromDegreesArrayHeights([
    //       107.0, 43.0, 100000.0, 97.0, 43.0, 100000.0, 97.0, 40.0, 100000.0, 107.0, 40.0, 100000.0, 107.0, 43.0,
    //       100000.0
    //     ]),
    //     material: Cesium.Color.GREEN
    //   }
    // });
  },

  methods: {
    copyPosition() {
      console.log(this.position);
    }
  }
};
</script>

<style lang="scss" scoped>
#bingmap-container {
  height: 100%;
  position: relative;
  cursor: crosshair;
}

.info {
  position: fixed;
  bottom: -5px;
  right: 5px;
  font-size: 16px;
  line-height: 40px;
  height: 40px;
  width: 400px;
  background: #cccccc88;
  z-index: 1000;
}
</style>
